<template>
  <div class='content'>
    <el-row type='flex' justify='space-between' align='middle' class='searchBox'>
      <!-- 查询条件 -->
      <el-col :span='20'>
        <el-row type='flex' justify='start'>
          <el-col :span='6'>
            企业名称:
            <el-input
              style='width: 200px'
              v-model='model.companyName'
              placeholder='企业名称'
              clearable />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span='4'>
        <el-button type='primary' @click='search'>搜索</el-button>
        <el-button type='success' @click='add'>新增</el-button>
        <el-button type='danger' @click='delBatch'>批量删除</el-button>
      </el-col>
    </el-row>
    <!-- table -->
    <el-card>
      <el-table class='tableForm' ref='multipleTable' :data='dataList' v-loading='tableloading' border @selection-change='handleSelectionChange'>

        <el-table-column type='selection' width='55'></el-table-column>

        <el-table-column width='50' align='center' type='index' label='序号' :index='indexMethod'></el-table-column>

        <el-table-column prop='companyName' label='企业名称' align='center'></el-table-column>

        <el-table-column prop='name' label='污染物名称' align='center'>
          <template slot-scope='scope'>
            <el-link type='primary' @click='edit(scope.row)'>{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>

        <el-table-column prop='output' label='产生量(t/a)' align='center'></el-table-column>
        <el-table-column prop='total' label='总量指标(t/a)' align='center'></el-table-column>
        <el-table-column prop='discharge' label='实际排放量(t/a)' align='center'></el-table-column>

        <el-table-column prop='governanceMeasuresName' label='治理措施' align='center'>
          <template slot-scope='scope'>
            <el-link type='primary' @click='info(scope.row.governanceMeasures)'>{{ scope.row.governanceMeasuresName }}</el-link>
          </template>
        </el-table-column>

        <el-table-column prop='output' label='是否达标排放' align='center'>
          <template slot-scope='scope'>
                <span v-if='scope.row.total && scope.row.discharge' :style="{ color: scope.row.total - scope.row.discharge >= 0 ? 'green':'red'}">
                  {{ scope.row.total - scope.row.discharge >= 0 ? '达标' : '超标' }}
                </span>
            <span v-else></span>
          </template>
        </el-table-column>

        <el-table-column prop='portName' label='排放口' align='center'></el-table-column>

        <el-table-column prop='remarkText' label='备注' align='center'></el-table-column>

      </el-table>

      <el-pagination
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page='model.current'
        :page-sizes='[10, 20, 30]'
        :page-size='model.size'
        layout='total, sizes, prev, pager, next, jumper'
        :total='model.total'
      ></el-pagination>

    </el-card>

    <!-- 添加弹框 -->
    <add v-if='addVisible'></add>
    <!-- 编辑弹框 -->
    <edit v-if='editVisible' :editItem='editItem'></edit>

    <info v-if='infoVisible' :id='infoId'></info>

  </div>
</template>
<script>

import add from './info/add';
import edit from './info/edit';

import info from '../common/info';

export default {
  components: {
    add, edit, info,
  },
  data() {
    return {
      dataList: [],
      delList: [],
      tableloading: false,
      model: {
        name: '',
        companyName: '',
        type: 'WATER',

        current: 1,
        size: 10,
        total: 0,
      },
      //添加
      addVisible: false,
      //编辑
      editVisible: false,
      editItem: {},

      infoVisible: false,
      infoId: '',
    };
  },
  created() {
    this.search();
  },
  mounted() {
    this.$ge.$on('biz-waste-water-info-change-search', () => {
      this.addVisible = false;
      this.editVisible = false;
      this.search();
    });

    this.$ge.$on('biz-waste-info-view', () => {
      this.infoVisible = false;
    });
  },
  methods: {
    // 分页 ( 当页数量改变 )
    handleSizeChange(val) {
      this.model.size = val;
      this.search();
    },
    // 分页 （ 页码改变 ）
    handleCurrentChange(val) {
      this.model.current = val;
      this.search();
    },
    // 批量删除
    handleSelectionChange(val) {
      this.delList = val;
    },
    //查询企业列表
    search() {
      this.tableloading = true;
      this.$get('/biz-pollution-source/pageList', this.model)
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.dataList = result.data.records;

            this.model.size = result.data.size;
            this.model.total = result.data.total;
            this.model.current = result.data.current;
          }
          this.tableloading = false;
        })
        .catch((error) => {
          //异常暂定为空
          this.dataList = [];
          this.tableloading = false;
        });
    },

    //添加
    add() {
      this.addVisible = true;
    },
    //编辑
    edit(row) {
      this.editVisible = true;
      this.editItem = row;
    },
    info(id) {
      if (!id) {
        return;
      }
      this.infoVisible = true;
      this.infoId = id;
    },
    //删除用户
    delBatch() {
      let that = this;
      if (this.delList.length == 0) {
        this.$message.warning('请勾选列表左侧要删除的数据')
        return;
      }
      let ids = this.delList.map(item => item.id)
      this.$confirm(
        '删除后无法恢复是否确认删除？',
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(() => {
          this.$postJson('/biz-pollution-source/delBatch', ids)
            .then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.search();
                that.$refs['multipleTable'].clearSelection();
              } else this.$message.error(result.msg);
            })
            .catch((error) => {
              //删除异常
              this.$message.error('删除异常');
            });
        })
        .catch(() => {
          //取消事件
        });
    },

  },
};
</script>
<style scoped>

</style>
